<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-shop"></i>
          商家列表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form :model="search" :inline="true">
          <el-form-item label="商户名称">
            <el-input
              v-model="search.merchantName"
              placeholder="请输入商户名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="search.mobile"
              placeholder="请输入手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="经营人姓名">
            <el-input
              v-model="search.userName"
              placeholder="请输入经营人姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="经营人手机">
            <el-input
              v-model="search.userMobile"
              placeholder="请输入经营人手机号"
              clearable
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="审核状态"> -->
          <!--   <el-select -->
          <!--     v-model="search.isAudit" -->
          <!--     placeholder="请选择审核状态" -->
          <!--     clearable -->
          <!--   > -->
          <!--     <el-option label="未审核" :value="0"></el-option> -->
          <!--     <el-option label="已通过" :value="1"></el-option> -->
          <!--     <el-option label="已拒绝" :value="2"></el-option> -->
          <!--   </el-select> -->
          <!-- </el-form-item> -->
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getData()">
              搜索
            </el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        maxHeight="600px"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="merchantName"
          label="店铺名称"
          min-width="150"
          fixed="left"
        ></el-table-column>
        <el-table-column label="商家信息" align="center" min-width="180">
          <template #default="scope">
            <div>{{ scope.row.userName }}</div>
            <div style="color: #909399">{{ scope.row.userMobile }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="商家等级" align="center" width="100"> -->
        <!--   <template #default="scope"> -->
        <!--     <el-tag v-if="scope.row.merchantType === 1">门店</el-tag> -->
        <!--     <el-tag v-else-if="scope.row.merchantType === 2" type="success" -->
        <!--       >市代</el-tag -->
        <!--     > -->
        <!--     <el-tag v-else-if="scope.row.merchantType === 3" type="warning" -->
        <!--       >省代</el-tag -->
        <!--     > -->
        <!--     <el-tag v-else type="info">-</el-tag> -->
        <!--   </template> -->
        <!-- </el-table-column> -->
        <el-table-column
          prop="parentLoginName"
          label="商家邀请人"
          align="center"
          min-width="120"
        ></el-table-column>
        <!-- <el-table-column label="审核状态" align="center" width="100"> -->
        <!--   <template #default="scope"> -->
        <!--     <el-tag v-if="scope.row.isAudit === 0" type="warning" -->
        <!--       >未审核</el-tag -->
        <!--     > -->
        <!--     <el-tag v-else-if="scope.row.isAudit === 1" type="success" -->
        <!--       >已通过</el-tag -->
        <!--     > -->
        <!--     <el-tag v-else-if="scope.row.isAudit === 2" type="danger" -->
        <!--       >已拒绝</el-tag -->
        <!--     > -->
        <!--   </template> -->
        <!-- </el-table-column> -->
        <el-table-column
          prop="auditTime"
          label="认证时间"
          :formatter="dateFormat"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="dateFormat"
          min-width="160"
        ></el-table-column>
        <el-table-column label="操作" width="260" align="center" fixed="right">
          <template #default="scope">
            <div
              class="table-button-group"
              style="
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 8px;
              "
            >
              <el-button type="text" @click="viewSubordinates(scope.row)"
                >查看下级</el-button
              >
              <el-button type="text" @click="viewOrders(scope.row)"
                >查看订单</el-button
              >
              <el-button type="text" @click="viewGoods(scope.row)"
                >查看商品</el-button
              >
              <!-- <el-button
                v-if="scope.row.isAudit === 0"
                type="text"
                @click="audit(scope.row)"
                >审核</el-button
              > -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="query.pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <AuditDialog
      v-model="showAudit"
      :merchantData="currentMerchant"
      @success="handleAuditSuccess"
    />
    <SubordinatesDialog v-model="showSubordinates" :userId="currentUserId" />
    <OrdersDialog v-model="showOrders" :merchantId="currentMerchantId" />
    <GoodsDialog v-model="showGoods" :merchantId="currentMerchantId" />
  </div>
</template>

<script>
import { api } from "../../api/index";
import moment from "moment";
import AuditDialog from "./components/AuditDialog.vue";
import SubordinatesDialog from "./components/SubordinatesDialog.vue";
import OrdersDialog from "./components/OrdersDialog.vue";
import GoodsDialog from "./components/GoodsDialog.vue";

export default {
  inject: ["reload"],
  name: "merchantList",
  components: {
    AuditDialog,
    SubordinatesDialog,
    OrdersDialog,
    GoodsDialog,
  },
  data() {
    return {
      query: {
        pageIndex: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableData: [],
      search: {
        merchantName: "",
        mobile: "",
        userName: "",
        userMobile: "",
        accountName: "",
        isAudit: null,
      },
      timeRange: [],
      showAudit: false,
      showSubordinates: false,
      showOrders: false,
      showGoods: false,
      currentMerchant: {}, // 当前审核的商家
      currentUserId: "", // 当前查看的用户ID
      currentMerchantId: null, // 当前查看商品的商家ID
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取列表数据
    getData() {
      const params = {
        limit: this.query.pageSize,
        offset: this.query.pageIndex,
        merchantName: this.search.merchantName,
        mobile: this.search.mobile,
        userName: this.search.userName,
        userMobile: this.search.userMobile,
        accountName: this.search.accountName,
        isAudit: this.search.isAudit,
      };

      // 添加时间范围
      if (this.timeRange && this.timeRange.length === 2) {
        params.startTime = this.timeRange[0];
        params.endTime = this.timeRange[1];
      }

      api("/web/bdm/lists", params).then((res) => {
        if (res.code === 2000) {
          this.tableData = res.data.rows || res.data;
          this.query.pageTotal = res.data.total || 0;
        }
      });
    },

    // 分页导航
    handlePageChange(val) {
      this.query.pageIndex = val;
      this.getData();
    },

    // 重置搜索
    resetSearch() {
      this.search = {
        merchantName: "",
        mobile: "",
        userName: "",
        userMobile: "",
        accountName: "",
        isAudit: null,
      };
      this.timeRange = [];
      this.query.pageIndex = 1;
      this.getData();
    },

    // 时间过滤器
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    // 审核
    audit(row) {
      this.currentMerchant = row;
      this.showAudit = true;
    },

    // 审核成功回调
    handleAuditSuccess() {
      this.getData();
    },

    // 查看下级
    viewSubordinates(row) {
      this.currentUserId = row.userId;
      this.showSubordinates = true;
    },

    // 查看订单
    viewOrders(row) {
      this.currentMerchantId = row.id;
      this.showOrders = true;
    },

    // 查看商品
    viewGoods(row) {
      this.currentMerchantId = row.id;
      this.showGoods = true;
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

:deep(.table-button-group .el-button) {
  margin: 0 !important;
}

:deep(.el-form-item) {
  margin-bottom: 15px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style>
